<template>
  <div id="contacts">
    <div class="contacts-inner">
      <section class="area newFris">
        <h2 class="title">新的朋友</h2>
        <div class="content"  @click="clickNewFris" :class="{active: isNewFris}">
          <Badge :count="newFriendCount"><span class="img iconfont icon-icon-xinxiaoxitongzhi"></span></Badge>
          <span class="name">新的朋友</span>
        </div>
      </section>
      <section class="area groupChats">
        <h2 class="title">群聊</h2>
        <div class="content">
          <span class="img iconfont icon-qunliao1"></span>
          <span class="name">新建群聊</span>
        </div>
      </section>
      <section class="area" v-for="(contact, index) in contacts" :key="index">
        <h2 class="title">{{index}}</h2>
        <div class="content" 
            v-for="(person, index) in contact" :key="index" 
            @click="setCurrentPerson(person)" 
            :class="{active: person.friendUsername === currentPerson.friendUsername}"
        >
          <img class="img" :src="imgBaseUrl+person.friendImg" alt="">
          <span class="name">{{person.friendAlias}}</span>
        </div>
      </section>
    </div>
    <ContactsDetail :currentPerson="currentPerson" :isNewFris="isNewFris"/>
  </div>
</template>

<script>
import {mapState} from 'vuex'
import ContactsDetail from '@/components/ContactsDetail/ContactsDetail.vue'
export default {
  data () {
    return {
      currentPerson: {}, // 当前选中的联系人
      isNewFris: false // 传入子组件的props
    }
  },
  computed: {
    ...mapState(['userInfo', 'contacts', 'imgBaseUrl', 'newFriendCount'])
  },
  methods: {
    setCurrentPerson (person) {
      this.currentPerson = person // 将当前person的值给到currentPerson
      this.isNewFris = false // isNewFris设为false，表示未点击‘新的朋友’
    },
    clickNewFris () {
      this.currentPerson = {} // 将当前currentPerson置空
      this.isNewFris = true
      this.$store.commit('clearNewFriendCount') // 清零小红点
    }
  },
  components: {
    ContactsDetail
  }
}
</script>

<style lang="stylus">
@import '~@/common/stylus/mixins.styl'
#contacts
  position absolute
  left 70px
  top 0
  bottom 0
  right 0
  background #f3f3f3
  overflow hidden
  .contacts-inner
    width 310px
    position absolute
    top 75px
    bottom 0
    overflow hidden
    background-color #eaeaea
    &:hover
      overflow auto
    .area
      bottom-border-1px(#dedede)
      width 310px
      .title
        font-size 15px
        padding-left 10px
        line-height 65px
        height 45px
        color #afafaf
      .content
        height 75px
        display flex
        align-items center
        &:hover
          background-color #e2e2e2
        &.active
          background-color #cecdcd
        .name
          font-size 17px
          color #1d1d1d
        .img
          width 40px
          height 40px
          margin 10px
          line-height 40px
          font-size 40px
        .icon-icon-xinxiaoxitongzhi
          color #f7af2d
        .icon-qunliao1
          color #10ad10
        .ivu-badge-count
          right 10px
</style>
